<template>
  <el-card shadow="hover">
    <div slot="header">
      <span class="test-title">{{
        `第${index}题: ` + testData.itemTitle
      }}</span>
      <el-button
        v-if="deleteBtnShow"
        @click="deleteTest"
        icon="el-icon-delete"
        style="float: right; padding: 3px 0"
        type="text"
      ></el-button>
      <div style="float: right; margin-right: 20px; padding: 3px 0">
        <span>分值:</span>
        <span class="test-score">{{ `${testData.score}分` }}</span>
      </div>
    </div>
    <el-row class="test-content">
      <el-col :span="22">
        <div class="itemContent">{{ testData.itemContent }}</div>
      </el-col>
      <el-col :span="2">
        <slot name="contentRight" :row="testData"></slot>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  props: ["testData", "index", "deleteBtnShow"],
  data() {
    return {};
  },
  methods: {
    deleteTest() {
      this.$confirm("是否删除题目?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$emit("delete", this.index - 1);
      });
    },
  },
};
</script>

<style scoped>
.test-title {
  font-size: 16px;
  font-weight: 700;
  color: #606266;
  display: inline-block;
  max-width: 80% ;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.test-content {
  padding: 10px;
  font-size: 16px;
  color: #606266;
}
.test-score {
  font-size: 16px;
  font-weight: 700;
  color: #409eff;
}
.itemContent {
  width: 80%;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
</style>